<template>
    <div class="newaddress">
      <div class="title">
        <van-icon size="24" @click="goBack" name="arrow-left" />
        <div class="sh">新增地址</div>
      </div>
      <van-address-edit
        :area-list="areaList"
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="handleSave"
        @change-default="change"
      />
    </div>
  </template>
  
  <script setup lang="ts">
 import { ref, reactive,} from "vue";  
import { areaList } from "@vant/area-data";  
import { useUserStore } from '../../../stores/userStore/user'  
import { useRouter } from 'vue-router'  

  
const userStore = useUserStore()  
const flag = ref(false)  
const router = useRouter(); 
const myid = ref(0) 
  
type setObj = {  
  id:number
  name: string,  
  province: string,  
  city: string,  
  county: string,  
  addressDetail: string,  
  tel: number,  
  isDefault: boolean,  
  adress:string
}  

  
const change = () => {  
  flag.value = !flag.value  
  console.log(flag.value);  
}  
  
const goBack = () => {  
  window.history.back();  
};  
  
const addressObj = reactive<setObj>({  
  id:0,
  name: "",  
  province: "",  
  city: "",  
  county: "",  
  addressDetail: "",  
  tel: 0,  
  isDefault: true,
  address:'', 
});  
  
const handleSave = (address: setObj) => {   

  userStore.addId()
  console.log(myid.value);
  
  console.log(address);
  Object.assign(addressObj, { 
    id  :userStore.id, 
    name: address.name,    
    province: address.province,    
    city: address.city,    
    county: address.county,    
    addressDetail: address.addressDetail,    
    tel: address.tel,    
    isDefault: flag.value,  
    address:address.province + address.city+address.county
  });    
  userStore.setAddress(addressObj);
 
  router.replace('address')  
};
  
  </script>
  <style scoped>
  .newaddress{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 99;
  }
  .title {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: #a9a9a9;
  }
  .sh {
    flex: 0 0 53vw;
    color: black;
  }
  li {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  input {
    border: none;
    margin: 20px;
  }
  .moren {
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bottom {
    margin: 0 auto;
    margin-top: 45vh;
    width: 90vw;
    border-radius: 999px;
    background-color: #ff5e2d;
    text-align: center;
    line-height: 2.5;
    color: white;
    font-weight: bold;
  }
  </style>